.border-box{
  box-sizing: border-box;
}
.overflow-hidden{
  overflow: hidden;
}
.h-full{
  height: 100%;
}
.w-full{
  width: 100%;
}

.pointer {
  cursor: pointer;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.flex-center{
  display: flex;
  align-items: center;
}
.flex-end{
  display: flex;
  justify-content: flex-end;
}
.flex-start{
  display: flex;
  justify-content: flex-start;
}
.flex-space{
  display: flex;
  justify-content: space-between;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1 1 0;
}
.flex-auto {
  flex: auto;
}
.flex-none {
  flex: none;
}
.space-bet {
  justify-content: space-between;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}

.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}

.f-bold {
  font-weight: bold;
}

.mt-10 {
  margin-top: 10px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mt-30 {
  margin-top: 30px !important;
}
.mt-40 {
  margin-top: 40px !important;
}
.mt-50 {
  margin-top: 50px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-30 {
  margin-bottom: 30px !important;
}
.mb-40 {
  margin-bottom: 40px !important;
}
.mb-50 {
  margin-bottom: 50px !important;
}

.ml-10 {
  margin-left: 10px !important;
}
.ml-20 {
  margin-left: 20px !important;
}
.ml-30 {
  margin-left: 30px !important;
}
.ml-40 {
  margin-left: 40px !important;
}
.ml-50 {
  margin-left: 50px !important;
}

.mr-10 {
  margin-right: 10px !important;
}
.mr-20 {
  margin-right: 20px !important;
}
.mr-30 {
  margin-right: 30px !important;
}
.mr-40 {
  margin-right: 40px !important;
}
.mr-50 {
  margin-right: 50px !important;
}

.display-inline-block {
  display: inline-block;
}

.display-block{
  display: block;
}

.display-inline{
  display: inline;
}

// 文字按钮样式
.el-button--text {
  padding: 10px 2px !important;
  box-sizing: border-box;
}

th.gutter {
  display: table-cell !important;
}

.clearfix:after,
.clearfix:before {
  display: table;
  content: " ";
  height: 0;
  line-height: 0;
}
.clearfix:after {
  clear: both;
}

// 设置滚动条大小
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
} // 滚动条整体部分
::-webkit-scrollbar-track {
  background: none;
} // 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 10px;
} // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

// 声明全局常用css变量
:root {
  --bg-grey: #f5faff;
  --color-theme: #0C41A1; // 主题色
  --menu-width: 200px;
  --menu-bg: #0C41A1;
  --menu-bg-l: #245ABB;
  --primary-bg: #2761ff;
  --color-white: #ffffff;
  --color-black: #333333;
  --color-text-opticy: rgba(255, 255, 255, 0.85);
  --color-route-content: #409EFF;
}
